<template>
  <div class="slotFather">
    <h1>这里是父组件</h1>
    <!-- 1.普通插槽,写在组件内,在子组件使用slot标签显示 -->
    <!-- <slotSon title="今日热门游戏">
      <ul>
        <li v-for="g in games" :key="g.id">{{ g.name }}</li>
      </ul>
    </slotSon> -->
    <!-- 2.具名插槽 -->
    <!-- <slotSon title="今日热门游戏">
      <template v-slot:s1>
        <ul>
          <li v-for="g in games" :key="g.id">{{ g.name }}</li>
        </ul>
      </template>
      <template #s2>
        <a href="">更多</a>
      </template>
    </slotSon> -->
    <!-- 3.作用域插槽 -->
    <slotSon v-slot="params">
      <!-- <Game v-slot:default="params"> -->
      <!-- <Game #default="params"> -->
      <ul>
        <li v-for="g in params.games" :key="g.id">{{ g.name }}</li>
      </ul>
    </slotSon>
  </div>
</template>
<script lang="ts" setup>
import { reactive } from "vue";
import slotSon from "./slotSon.vue";
const games = reactive([{ name: "LOL" }, { name: "CF" }]);
</script>
<style scoped>
.slotFather {
  width: 80vw;
  height: 80vh;
  border: 1px solid red;
}
</style>